import React from "react"
import queryString from 'query-string'
import { Carousel, WingBlank, Tabs, WhiteSpace } from 'antd-mobile';
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Diantaicss from "./style/index.module.css"
import img1 from "./img/返回1.png"
import a1 from "./img/1.png"
import a2 from "./img/2.png"
import a3 from "./img/3.png"
import Diantaifenlei from "./电台分类/index"
import Diantaipaihang from "./电台排行/index"
import Fufeijingpin from "./付费精品/index"
class Diantai extends React.Component {
    state = {
        data: [
            "KRlazN4B32tTXH2CuQobGA==/109951164500608286",
            "2yh7rSB7vmJH06cr4GWAIg==/109951164500585257"
            , "LAQvfszxItqNJRrgeGt6Xw==/109951164500598472"],
        imgHeight: 176,
        zhoumozuanyong: [],
        zhoumozuanyong1: [],
        zhoumozuanyong2: [],
        zhoumozuanyong3: [],
        zhoumozuanyong4: [],
        zhoumozuanyong5: [],
        zhoumozuanyong6: [],
    }
    img1fanhui() {
        // this.props.history.goBack()
        this.props.history.push("/gen/Find")
    }
    componentWillMount() {
        fetch('http://106.12.79.128:666/top/album?limit=3')//新碟
            .then(body => body.json())
            .then(res => {
                // console.log(res.albums[0])
                this.setState({
                    zhoumozuanyong: res.albums
                })
            })
        fetch('http://106.12.91.147:3000/dj/category/recommend')//新碟
            .then(body => body.json())
            .then(res => {
                console.log(res.data)
                this.setState({
                    zhoumozuanyong1: res.data
                })
                console.log(this.state.zhoumozuanyong1);
            })
    }
    jump(playlistid) {
        const id = this.props.location.id
        this.props.history.push({ pathname: "/Findplaylist", playlistid, id });
    }
    render() {
        let { zhoumozuanyong, zhoumozuanyong1, zhoumozuanyong2, zhoumozuanyong3, zhoumozuanyong4
            , zhoumozuanyong5, zhoumozuanyong6 } = this.state
        return (
            <div>
                <div>
                    <img onClick={this.img1fanhui.bind(this)} className={Diantaicss.img1} src={img1} alt="" />
                    <span className={Diantaicss.divspan1}>电台</span>
                </div>
                {/* -----------------------------------轮播图--------------------------------------------- */}
                <div className={Diantaicss.div2div1}>
                    <WingBlank>
                        <Carousel
                            autoplay
                            infinite
                        >
                            {this.state.data.map(item => (
                                <a
                                    key={item}
                                    href="http://www.alipay.com"//跳转到图片地址
                                    style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                                >
                                    <img
                                        src={`http://p1.music.126.net/${item}.jpg?imageView&quality=89`}
                                        alt=""
                                        style={{ width: '100%', verticalAlign: 'top', borderRadius: '6px' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </a>
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>

                {/* -----------------------------------五个每日推荐--------------------------------------------- */}
                <div className={Diantaicss.comdiv}>
                    <Link className={Diantaicss.coma} to="/Diantaifenlei">
                        <img className={Diantaicss.com} src={a1} alt="" /><br />
                        <span className={Diantaicss.comspan}>电台分类</span>
                    </Link>
                    <Link className={Diantaicss.coma} to="/Diantaipaihang">
                        <img className={Diantaicss.com} src={a2} alt="" /><br />
                        <span className={Diantaicss.comspan}>电台排行</span>
                    </Link>
                    <Link className={Diantaicss.coma} to="/Fufeijingpin">
                        <img className={Diantaicss.com} src={a3} alt="" /><br />
                        <span className={Diantaicss.comspan}>付费精品</span>
                    </Link>
                </div>
                <div className={Diantaicss.comhr}></div>
                <Switch>
                    <Route path="/Diantaifenlei" component={Diantaifenlei}></Route>
                    <Route path="/Diantaipaihang" component={Diantaipaihang}></Route>
                    <Route path="/Fufeijingpin" component={Fufeijingpin}></Route>
                </Switch>
                {/* -----------------------------------听听>--------------------------------------------- */}
                <div>
                    <span className={Diantaicss.tuijianspan}>听听></span>
                    <div className={Diantaicss.Litemdiv}>
                        <ul>
                            {
                                zhoumozuanyong.map(item =>
                                    <li className={Diantaicss.Litemli} key={item.id}>
                                        <a className={Diantaicss.Litema} href="#">
                                            <img className={Diantaicss.Litemimg} src={item.picUrl} alt="" />
                                            <p className={Diantaicss.Litemp4}>{item.name}</p>
                                        </a>
                                    </li>
                                )
                            }
                        </ul>
                    </div>
                </div>
                {/* -----------------------------------二次数组遍历电台接口--------------------------------------------- */}
                <div>
                    {
                        zhoumozuanyong1.map(item =>
                            <div>
                                <span className={Diantaicss.tuijianspan} key={item.categoryId}>{item.categoryName}</span>
                                <ul>
                                    {
                                        (item.radios).map(item1 =>
                                            <li className={Diantaicss.Litemli} key={item1.id}>
                                                {/* <a className={Diantaicss.Litema} href="#"> */}
                                                    <img onClick={this.jump.bind(this, item1.id)} className={Diantaicss.Litemimg} src={item1.picUrl} alt="" />
                                                    <p className={Diantaicss.Litemp4}>{item1.name}</p>
                                                {/* </a> */}
                                            </li>
                                        )}
                                </ul>
                            </div>
                        )}
                </div>
            </div>
        )
    }
}
export default Diantai